/* static/css/custom.css */
.navbar {
    background-color: #2c3e50; /* 导航栏背景色 */
}
.btn-primary {
    background-color: #e74c3c; /* 自定义主按钮颜色 */
    border-color: #e74c3c;
}
.card {
    margin-bottom: 20px; /* 卡片底部间距 */
    display: flex;       /* 使用flex布局确保卡片内容均匀分布 */
    flex-direction: column;
    height: 100%;        /* 确保卡片高度一致 */
}
.card-img-top {
    object-fit: contain;    /* 修改为contain，确保图片完整显示 */
    height: 250px;        /* 保持高度 */
    width: 100%;          /* 宽度充满容器 */
    min-height: 250px;    /* 确保最小高度 */
    background-color: #f8f9fa; /* 添加背景色，防止图片比例不同时出现空白 */
}
.pet-card {
    display: flex;        /* 使用flex布局 */
    padding: 10px;        /* 添加内边距 */
}
.card-body {
    flex-grow: 1;         /* 让卡片内容区域自动填充剩余空间 */
    display: flex;        /* 使用flex布局 */
    flex-direction: column; /* 垂直排列内容 */
}
.card-title {
    margin-bottom: 10px;  /* 标题与内容的间距 */
    font-size: 1.2rem;    /* 适当调整标题大小 */
}
.card-text {
    margin-bottom: auto;  /* 让文本内容占据剩余空间，但按钮始终在底部 */
    line-height: 1.6;     /* 增加行高提高可读性 */
}
.card .btn-primary {
    margin-top: 15px;     /* 按钮与上方内容的间距 */
}

/* 响应式设计 - 在不同屏幕尺寸上优化显示 */
@media (max-width: 768px) {
    .pet-card {
        width: 100%;      /* 在小屏幕上让卡片宽度为100% */
    }
    .card-img-top {
        height: 200px;    /* 在小屏幕上适当减小图片高度 */
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .card-img-top {
        height: 220px;    /* 在中等屏幕上调整图片高度 */
    }
}

/* 优化宠物列表的网格布局 */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;      /* 抵消卡片的内边距 */
}
.row > div {
    padding: 0 10px;
}